<template>
  <el-form ref="channelInfoForm" :model="channelInfoForm" label-width="95px" size="mini" :rules="rules">

    <el-collapse v-model="activeNames">
      <el-collapse-item name="3">
        <template slot="title">
          <span class="collapse_title">3、价值信息：</span>
        </template>
        <el-row>
          <el-col :span="12">
            <el-form-item label="认识途径" prop="sourceType">
              <el-select v-model="channelInfoForm.sourceType" placeholder="渠道认识途径">
                <el-option v-for="item in this.appEnum.channelSourceType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="channelcat">
              <el-tooltip slot="label" effect="dark" placement="top-start">
                <div slot="content">多选性质</div>
                <span>渠道类别<i class="el-icon-question"></i></span>
              </el-tooltip>
              <el-select v-model="channelInfoForm.channelcat" multiple placeholder="渠道类别（多选性质）" style="width:375px">
                <el-option v-for="item in this.appEnum.channelType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="渠道认识途径备注说明"  prop="source">
              <el-input v-model="channelInfoForm.source" type="textarea" :rows="3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="渠道能力覆盖范围评价" prop="channelRegion">
              <el-input v-model="channelInfoForm.channelRegion" type="textarea" :rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="渠道合作兴趣点" prop="inmark">
              <el-input v-model="channelInfoForm.inmark" type="textarea" :rows="7"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述双方合作共赢点" prop="winWin">
              <el-input v-model="channelInfoForm.winWin" type="textarea" :rows="7"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

<!--        渠道能力覆盖范围判断；（全国性单位0.2、省级单位0.15、市县级单位0.1）
        是否渠道和我司最终目标客户已有成功合作经验；（长期合作0.2、偶有合作0.1、无）
        近期有在跟的项目机会或是已经和我司合作过；0.2
        是否渠道采购过类似我司的产品；0.2
        对我们产品的认可度；0.1（以是否有列举可以适用的场景为标准）
        渠道单位内部与我们是否建有较好的关系网络；（以随时能约出来喝茶、吃饭为标准）0.1-->

        <el-row>
          <el-col :span="24">
            <el-form-item prop="importance">
              <el-tooltip slot="label" effect="dark" placement="top-start">
                <div slot="content">≥0.8，5星潜力；<br />≥0.6-0.8，4星潜力；<br/>≥0.4-0.6，3星潜力；<br/>≥0.4-0.2，2星潜力；<br/>≥0-0.2，1星潜力；</div>
                <span>渠道价值<i class="el-icon-question"></i></span>
              </el-tooltip>
<!--              <el-button type="danger" icon="el-icon-remove-outline" size="mini"
                         circle style="float:left;margin-top: 4px"
                         @click.stop="channelInfoForm.importance=0"></el-button>-->
              <el-rate v-model="channelInfoForm.importance"
                       :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                       style="margin: 4px 0 0 8px;float:left"
                       disabled
                       show-text
                       :texts="['1星潜力','2星潜力','3星潜力','4星潜力','5星潜力']"></el-rate>
              <el-row>
                <el-col :span="2"></el-col>
                <el-col>
                  <el-row>
                    <el-col :span="24">
                      ⒈渠道能力覆盖范围判断：
                      <el-radio-group v-model="rate.Region" size="mini" @change="calcRate">
                        <el-radio-button label="0.2">全国性单位(0.2)</el-radio-button>
                        <el-radio-button label="0.15">省级单位(0.15)</el-radio-button>
                        <el-radio-button label="0.1">市县级单位(0.1)</el-radio-button>
                      </el-radio-group>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24" style="margin-top: 2px">
                      ⒉和我司最终目标客户已有成功合作经验：
                      <el-radio-group v-model="rate.Cooperate" size="mini" @change="calcRate">
                        <el-radio-button label="0.2">长期合作(0.2)</el-radio-button>
                        <el-radio-button label="0.1">偶有合作(0.1)</el-radio-button>
                        <el-radio-button label="0">无(0)</el-radio-button>
                      </el-radio-group>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      ⒊近期有在跟的项目机会或是已经和我司合作过：<el-switch v-model="cooperated" active-text="0.2" @change="calcRate"></el-switch>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">⒋是否渠道采购过类似我司的产品：<el-switch v-model="buied" active-text="0.2" @change="calcRate"></el-switch>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">⒌对我们产品的认可度（以是否有列举可以适用的场景为标准）<el-switch v-model="approve" active-text="0.1" @change="calcRate"></el-switch>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">⒍渠道单位内部与我们是否建有较好的关系网络（以随时能约出来喝茶、吃饭为标准）<el-switch v-model="relation"  active-text="0.1" @change="calcRate"></el-switch>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item name="4">
        <template slot="title">
          <span class="collapse_title">4、后续跟进：</span>
        </template>
        <el-row>
          <el-col :span="6">
            <el-form-item label="渠道跟进人" prop="pricipalname">
              <el-select v-model="channelInfoForm.pricipalname" filterable placeholder="渠道跟进人">
                <el-option v-for="item in this.users" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label=""></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系建议" prop="followFrequency">
              <el-select v-model="channelInfoForm.followFrequency" placeholder="联系频度建议">
                <el-option v-for="item in this.appEnum.channelFollowRate" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="rate">
              <el-tooltip slot="label" effect="dark" placement="top-start">
                <div slot="content" v-html="channelRateTexts.join('；<br/>')"></div>
                <span>维系状态<i class="el-icon-question"></i></span>
              </el-tooltip>
              <el-button type="danger" icon="el-icon-remove-outline" size="mini" circle style="float:left;margin-top: 4px" @click.stop="channelInfoForm.rate=0"></el-button>
              <el-rate v-model="channelInfoForm.rate"
                       :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                       :max="6"
                       show-text
                       :texts="channelRateTexts.slice(1,7)"
                       score-template="{value}"
                       style="margin: 8px 0 0 8px;float:left" @mouseover.native="isHoverRate=true" @mouseout.native="isHoverRate=false"></el-rate>
              <span v-if="isShowRateP0Info">P0：未有沟通，刚记录或则对方无应答状态</span>

            </el-form-item>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>

    <!--<el-row>-->
    <!--<el-col :span="6">-->
    <!--<el-form-item label="省份:" prop="province">-->
    <!--<el-input v-model="channelInfoForm.province"></el-input>-->
    <!--</el-form-item>-->
    <!--</el-col>-->
    <!--<el-col :span="6">-->
    <!--<el-form-item label="地市:" prop="city">-->
    <!--<el-input v-model="channelInfoForm.city"></el-input>-->
    <!--</el-form-item>-->
    <!--</el-col>-->

    <!--</el-row>-->
    <!--<el-button @click="fromResetField">重置</el-button>-->
  </el-form>
</template>

<script>
  import Moment from 'moment'
  import { mapGetters, mapActions } from 'vuex'
  import _ from 'lodash'
  import { addChannel, updateChannel, updateChannelValue } from '@/api/channel'
  import { computeState, sumState } from '@/utils/bitcompute'

  export default {
    name: "channel-detail-info",
    props: {
      row: {
        type: Object
      }
    },
    data() {
      return {
        activeNames:['1','2','3','4'],
        // 表单验证规则
        rules: {
          customname:[
            {required: true, message: '请输入姓名!', trigger: 'blur'}
          ],
          pricipalname:[ // 负责人
            { required: true, message: '请输入负责人!', trigger: 'blur' }
          ],

          sourceType: [ // 渠道认识途径
            {required: true, message: '请选择渠道认识途径!', trigger: 'blur'}
          ],

          channelcat:[ // 渠道类别
            {required: true, message: '请选择渠道类别!', trigger: 'blur'}
          ],

          winWin: [ //初步描述双方合作共赢点
            {required: true, message: '请输入初步描述双方合作共赢点!', trigger: 'blur'}
          ],

          company:[ //单位名称
            {required: true, message: '请输入单位名称!', trigger: 'blur'}
          ],

          department:[ //所在部门
            {required: true, message: '请输入所在部门!', trigger: 'blur'}
          ],

          position:[ //所在职位
            {required: true, message: '请输入职位!', trigger: 'blur'}
          ],

          followFrequency:[
            {required: true, message: '请选择联系频度建议!', trigger: 'blur'}
          ],

          rate:[
            {required: true, message: '请选择维系状态!', trigger: 'blur'}
          ]
        },
        channelInfoForm: {},
        isHoverRate: false,
        rate:{}
      }
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'appEnum',
        'users',
        'channelRateTexts'
      ]),
      optionsChannelTypes(){
        return _.union([{ value: null, label: ''}], this.appEnum.channelType);
      },
      isShowRateP0Info(){
        return !this.channelInfoForm.rate && !this.isHoverRate
      },
      cooperated:{
        get:function(){
          return !!this.rate.Cooperated
        },
        set:function(newValue){
          this.rate.Cooperated = newValue ? 0.2 : 0
        }
      },
      buied:{
        get:function(){
          return !!this.rate.Buied
        },
        set:function(newValue){
          this.rate.Buied = newValue ? 0.2 : 0
        }
      },
      approve:{
        get:function(){
          return !!this.rate.Approve
        },
        set:function(newValue){
          this.rate.Approve = newValue ? 0.1 : 0
        }
      },
      relation:{
        get:function(){
          return !!this.rate.Relation
        },
        set:function(newValue){
          this.rate.Relation = newValue ? 0.1: 0
        }
      }
    },
    beforeMount() {
      this.channelInfoForm={
        'customname': null,
        'channelCreator':this.userInfo.name,
        'company': null,
        'department': null,
        'position': null,
        'hypro': null,
        'tel': null,
        'email': null,
        'fax': null,
        'website': null,
        'address': null,
        'sourceType': null,
        'source': null,
        'channelcat': [],
        'channelRegion':null,
        'inmark': null,
        'winWin':null,
        'importance':0,
        'pricipalname': this.userInfo.name,
        'followFrequency':null,
        'rate': 0,
        'province': null,
        'city': null
      }
      this.rate = {
          Region : null,
          Cooperate : null,
          Cooperated : null,
          Buied : null,
          Approve : null,
          Relation: null
      }
    },
    methods: {
      changeSelectCat(newValue){
        var channelCat = computeState(this.appEnum.channelType, sumState(this.channelInfoForm.channelcat))
        this.channelInfoForm.channelcat = channelCat.values
        this.channelInfoForm.channelLables = channelCat.labels
      },
      calcRate(newValue){
        var regionScore = this.rate.Region ? this.rate.Region : 0
        var cooperateScore = this.rate.Cooperate ? this.rate.Cooperate : 0
        var cooperatedScore = this.rate.Cooperated ? this.rate.Cooperated : 0
        var buiedScore = this.rate.Buied ? this.rate.Buied : 0
        var approveScore = this.rate.Approve ?  this.rate.Approve : 0
        var relationScore = this.rate.Relation ? this.rate.Relation : 0

        var score = parseFloat(regionScore) + parseFloat(cooperateScore) + cooperatedScore + buiedScore + approveScore + relationScore

        if(score>=0 && score < 0.2 ) {
          this.channelInfoForm.importance = 1
        }else if(score>=0.2 && score < 0.4) {
          this.channelInfoForm.importance = 2
        }else if(score>=0.4 && score < 0.6) {
          this.channelInfoForm.importance = 3
        }else if(score>=0.6 && score < 0.8) {
          this.channelInfoForm.importance = 4
        }else if(score>=0.8) {
          this.channelInfoForm.importance = 5
        }

        console.log(score)
      },

      initChannelInfo(){
        this.channelInfoForm={
          'customname': null,
          'channelCreator':this.userInfo.name,
          'company': null,
          'department': null,
          'position': null,
          'hypro': null,
          'tel': null,
          'email': null,
          'fax': null,
          'website': null,
          'address': null,
          'sourceType': null,
          'source': null,
          'channelcat': [],
          'channelRegion':null,
          'inmark': null,
          'winWin':null,
          'importance':0,
          'pricipalname': this.userInfo.name,
          'followFrequency':null,
          'rate': 0,
          'province': null,
          'city': null
        }
        this.rate = {
          Region : null,
          Cooperate : null,
          Cooperated : null,
          Buied : null,
          Approve : null,
          Relation: null
        }
      },

      addChannelInfo(){
        this.$refs.channelInfoForm.validate(valid => {
          if (valid) {
            this.channelInfoForm.creatoruserid =  this.userInfo.id;
            this.channelInfoForm.creationtime =  Moment().format('YYYY-MM-DD HH:mm:ss');
            this.channelInfoForm.lastmodifieruserid =  this.userInfo.id;
            this.channelInfoForm.lastmodificationTime =  Moment().format('YYYY-MM-DD HH:mm:ss');
            this.channelInfoForm.channeltype = sumState(this.channelInfoForm.channelcat)
            addChannel(this.channelInfoForm).then(res => {
              if (res.data.success) {
                const result = res.data.data
                let message = '新增渠道信息成功！'
                if (result) {
                  this.$message({
                    message: message,
                    type: 'success',
                    duration: 5 * 1000
                  })
                  // this.$emit('close-detail')
                }
              }
            })
          }
        })
      },

      updateChannelInfo(){
       return new Promise((resolve,reject)=>{
            this.$refs.channelInfoForm.validate(valid => {
              if (!valid){
                reject()
                return
              }

              this.channelInfoForm.lastmodifieruserid =  this.userInfo.id
              this.channelInfoForm.lastmodificationTime =  Moment().format('YYYY-MM-DD HH:mm:ss')
              this.channelInfoForm.channeltype = sumState(this.channelInfoForm.channelcat)

              this.channelInfoForm.ImpRegion = this.rate.Region ? this.rate.Region : 0
              this.channelInfoForm.ImpCooperate = this.rate.Cooperate ? this.rate.Cooperate : 0
              this.channelInfoForm.ImpCooperated = this.rate.Cooperated ? this.rate.Cooperated : 0
              this.channelInfoForm.ImpBuied = this.rate.Buied ? this.rate.Buied : 0
              this.channelInfoForm.ImpApprove = this.rate.Approve ? this.rate.Approve : 0
              this.channelInfoForm.ImpRelastion = this.rate.Relation ? this.rate.Relation : 0

              updateChannelValue(this.channelInfoForm).then(res => {
                if (res.data.success) {
                  const result = res.data.data
                  let message = '修改渠道价值信息成功！'
                  if (result) {
                    this.$message({
                      message: message,
                      type: 'success',
                      duration: 5 * 1000
                    })
                    resolve(result)
                    // this.$emit('close-detail')
                  }
                }
              })
            })
        })
      },
      // 重置验证
      fromResetField() {
        this.$refs.channelInfoForm.resetFields();
      },

      clearValidate(){
        this.$refs.channelInfoForm.clearValidate();
      }
    }

  }
</script>

<style scoped>
  .collapse_title{
    font-style:italic;
    font-weight:bold
  }
</style>
